{extend name="public:layout" /}
{block name='title'}编辑资料{/block}
{block name='head'}
<style>
    body {
        background: #ebebeb;
    }
    #clipArea {
             margin: 2px;
             height: 30vh;
         }
    #file,
    #clipBtn {
        margin: 20px;
    }
    #view {
        margin: 0 auto;
        width: 200px;
        height: 30vh;
        display:none;
    }
</style>
{/block}
{block name="body"}
<div class="mcm-user-head">
    <div class="head-left">
        <a href="javascript:history.back(-1)" class="link">
            <span class="iconfont icon-zuoyou1"></span>
        </a>
    </div>
    <div class="head-title">
        个人资料
    </div>
</div>
<div style="height:50px;"></div>
<style>
    .layui-m-layer0 .layui-m-layerchild{
        width:100%;
    }
    .layui-m-layercont{padding:0 20px;}
</style>
<div class="company-binding-box">
    <form action="" id="member_info">
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">头像</label></div>
                <div class="weui-cell__bd">
                    <div class="headimg">
                        <img src="{$memberInfo.member_avatar}" id="member_avatar_img" alt="">
                    </div>
                    <div class="weui-uploader__input-box" style="float: right;" onclick="showClip()">
                        <input type="hidden" name="member_avatar" id="member_avatar"
                               value="{$memberInfo.member_avatar}">
                    </div>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" name="member_truename" value="{$memberInfo.member_truename}"
                           placeholder="请输入您的姓名">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">性别</label></div>
                <div class="weui-cell__bd">
                    <select class="weui-select" name="member_sex">
                        <option value="0" {eq name="memberInfo.member_sex" value="0" } selected {/eq}>保密</option>
                        <option value="1" {eq name="memberInfo.member_sex" value="1" } selected {/eq}>男</option>
                        <option value="2" {eq name="memberInfo.member_sex" value="2" } selected {/eq}>女</option>
                    </select>
                </div>
            </div>
            {notempty name="memberInfo.company_id"}
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">职位</label></div>
                <div class="weui-cell__bd">
                    <input type="hidden" name="company_id" value="{$memberInfo.company_id}">
                    <input class="weui-input" type="text" name="member_duties" value="{$memberInfo.member_duties}"
                           placeholder="请输入您在公司的职位信息">
                </div>
            </div>
            {/notempty}
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">手机</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="tel" name="member_tel" value="{$memberInfo.member_tel}"
                           placeholder="请输入手机号">
                </div>
            </div>
            <div class="weui-cells__tips">名片展示用手机号码，与注册手机号码无关,如果此号码不修改，默认为注册手机号</div>

        </div>
    </form>
    <div style="padding:10px;">
        <a href="javascript:;"  class="weui-btn weui-btn_primary" onclick="subForm()">立即保存</a>
    </div>
    <div style="padding:10px;">
        <a class="weui-btn weui-btn_warn" href="{:url('Public/userLoginOut')}">退出登陆</a>
    </div>
</div>

{/block}
{block name="js"}
<script src="/public/plugins/html5ImgCompress/html5ImgCompress.min.js"></script>
<script src="/public/plugins/jQueryphotoClip/iscroll-zoom.js"></script>
<script src="/public/plugins/jQueryphotoClip/jquery.photoClip.min.js"></script>
<script src="/public/plugins/template/template.js"></script>
<script type="text/html" id="img-tpl">
</script>
<script>
    function showClip() {
        var base64='';
        layer.open({
            content:'<article class="htmleaf-container">\n' +
            '<div id="clipArea"></div>\n' +
            '<input type="file" id="file">\n' +
            '<button id="clipBtn" class="weui-btn weui-btn_mini weui-btn_primary">确定</button>\n' +
            '<button id="close" class="weui-btn weui-btn_mini weui-btn_warn">取消</button>\n' +
            '<div id="view"></div>\n' +
            '</article>'
            ,style: 'position:fixed; left:0; top:0; width:100%; height:100%;border-radius:0;box-sizing:border-box;padding:80px 0; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;'
            ,success:function () {
                $("#clipArea").photoClip({
                    width: 200,
                    height: 200,
                    file: "#file",
                    view: "#view",
                    ok: "#clipBtn",
                    loadStart: function() {
                        console.log("照片读取中");
                    },
                    loadComplete: function() {
                        console.log("照片读取完成");
                    },
                    clipFinish: function(dataURL) {
                        base64=dataURL;
                        console.log(dataURL);
                        $.post("{:url('/plus/Uploader/index',['action'=>uploadscrawl])}", {upfile: base64}, function (res) {
                            layer.closeAll();
                            var jsonData = JSON.parse(res);
                            if (jsonData.state == 'SUCCESS') {
                                $('#member_avatar').val(jsonData.url);
                                $('#member_avatar_img').attr('src', jsonData.url);
                            } else {
                                layer.open({
                                    content: '上传失败，请稍后再试！'
                                    , skin: 'msg'
                                    , time: 2 //2秒后自动关闭
                                });
                            }
                        })
                    }
                });
            }
        })
    }
    $(document).on('click', '#close', function(e) {
        layer.closeAll();
    });
//    $('#photoClip').change(function (e) {
//        new html5ImgCompress(e.target.files[0], {
//            before: function (file) {
//                if (file.type.indexOf('image') === -1) {
//                    layer.open({
//                        content: '请选择一张图片'
//                        , skin: 'msg'
//                        , time: 2 //2秒后自动关闭
//                    });
//                    return false;
//                }
//                // 这里一般是对file进行filter，例如用file.type.indexOf('image') > -1来检验是否是图片
//                // 如果为非图片，则return false放弃压缩（不执行后续done、fail、complete），并相应提示
//            },
//            done: function (file, base64) {
//                $.post("{:url('/plus/Uploader/index',['action'=>uploadscrawl])}", {upfile: base64}, function (res) {
//                    var jsonData = JSON.parse(res);
//                    if (jsonData.state == 'SUCCESS') {
//                        $('#member_avatar').val(jsonData.url);
//                        $('#member_avatar_img').attr('src', jsonData.url);
//                    } else {
//                        layer.open({
//                            content: '上传失败，请稍后再试！'
//                            , skin: 'msg'
//                            , time: 2 //2秒后自动关闭
//                        });
//                    }
//                })
//            },
//            fail: function (file) {
//                layer.open({
//                    content: '操作失败请刷新后再试！'
//                    , skin: 'msg'
//                    , time: 2 //2秒后自动关闭
//                });
//            },
//            complete: function (file) {
//            },
//            notSupport: function (file) {
//                layer.open({
//                    content: '浏览器不支持，请更换浏览器后重试'
//                    , skin: 'msg'
//                    , time: 2 //2秒后自动关闭
//                });
//                // 不支持操作，例如PC在这里可以采用swfupload上传
//            }
//        });
//    });

    function subForm() {
        var data = $('#member_info').serialize();
        $.post('{:url("userinfo")}', data, function (res) {
            layer.open({
                content: res.msg
                , skin: 'msg'
                , time: 2 //2秒后自动关闭
                , end: function () {
                    if (res.code) {
                        location.href = res.url;
                    }
                }
            });
        })
    }
</script>
{/block}